/*
 * @Author: hongbin
 * @Date: 2022-12-08 11:19:32
 * @LastEditors: hongbin
 * @LastEditTime: 2023-03-31 16:28:57
 * @Description:联系方式卡片
 */
import { FC, useCallback, useEffect, useState } from "react";
import styled from "styled-components";
import { post } from "../../api";
import { useAuth } from "../../context/AuthProvide";
import { UserInfo } from "../../hook/useRegisterForm";
import { FlexDiv } from "../../styled";

interface IProps {
    user: Partial<UserInfo>;
}

const ContactCard: FC<IProps> = ({ user }) => {
    const { recordUserInformation } = useAuth();
    const [edit, setEdit] = useState(false);
    const [prev, setPrev] = useState({ ...user });

    useEffect(() => {
        setPrev({ ...user });
    }, [user]);

    const handleEdit = useCallback(() => {
        setEdit((s) => !s);
    }, []);

    const update = () => {
        post("/Auth/update", { ...prev }).then((res) => {
            console.log(res);
            recordUserInformation({ ...prev });
            setEdit(false);
        });
    };

    const change = (key: string, val: string | boolean | number) => {
        setPrev((p) => ({ ...p, [key]: val }));
    };

    return (
        <Container>
            {edit ? (
                <>
                    <FlexDiv>
                        <h2>邮箱</h2>
                        <input
                            value={prev.mail}
                            onChange={(e) => {
                                change("mail", e.target.value);
                            }}
                        />
                    </FlexDiv>
                    <FlexDiv>
                        <h2>微信</h2>
                        <input
                            value={prev.chat}
                            onChange={(e) => {
                                change("chat", e.target.value);
                            }}
                        />
                    </FlexDiv>
                    <FlexDiv>
                        <h2>qq号</h2>
                        <input
                            value={prev.qq}
                            onChange={(e) => {
                                change("qq", e.target.value);
                            }}
                        />
                    </FlexDiv>

                    <FlexDiv>
                        <h2>公开联系方式</h2>
                        <input
                            type="checkbox"
                            checked={prev.public}
                            onChange={(e) => {
                                change("public", e.target.checked);
                            }}
                        />
                    </FlexDiv>

                    <button onClick={update}>保存</button>
                    <button onClick={handleEdit}>取消</button>
                </>
            ) : (
                <>
                    <span>邮箱：{user.mail || "未设置"}</span>
                    <span>微信：{user.chat || "未设置"}</span>
                    <span>qq:{user.qq || "未设置"}</span>
                    <button onClick={handleEdit}>编辑资料</button>
                    <FlexDiv items="center">
                        <Dot bg={user.public ? "#0f0" : "#8d8d8d"} /> {user.public ? "开放资料" : "不对外开放资料"}
                    </FlexDiv>
                </>
            )}
        </Container>
    );
};

export default ContactCard;

const Dot = styled.div<{ bg: string }>`
    width: 1vw;
    height: 1vw;
    border-radius: 2vw;
    background: ${(props) => props.bg};
    margin: 0 0.5vw;
`;

const Container = styled.div`
    background: #033c00;
    padding: 1vh 1vw;
    color: #fffae5;
    font-size: max(13px, 1vw);
    border-radius: 1vw;
    display: flex;
    flex-direction: column;
    width: max(20vw, 200px);
    span {
        margin: 1vh;
    }

    & > div {
        margin-bottom: 1vmin;
    }

    input {
        border-radius: 1vmin;
        border: none;
        margin-left: 1vmin;
        padding-left: 1vmin;
    }
`;
